<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>睿信教育</title>
  <link rel="stylesheet" href="../dist/lib/framework7/css/framework7.ios.min.css">
  <link rel="stylesheet" href="../dist/lib/framework7/css/framework7.ios.colors.min.css">
  <link rel="stylesheet" href="../dist/css/app.css">
  <style>
    .day-holiday{
      background-color: pink;
    }
  </style>
</head>
<body>
<!-- Views -->
<div class="views">
  <div class="view view-main">
    <div class="pages">
      <div data-page="index" class="page page-white">
        <div class="page-content">
          <div id="calendar-container"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="../dist/lib/zepto/zepto.min.js"></script>
<script type="text/javascript" src="../dist/lib/framework7/framework7.js"></script>
<script>
  var array = [
    {
      "name": "课程名称课程名称课程名称课程名称",
      "time": "2019-07-08 19:00",
      "url": "https://www.baidu.com/"
    },
    {
      "name": "课程名称111",
      "time": "2019-07-09 12:00",
      "url": "https://www.baidu.com/"
    },
    {
      "name": "课程名称222",
      "time": "2019-07-09 15:00",
      "url": "https://www.baidu.com/"
    }
  ];


  var myApp = new Framework7();
  var calendarInline = myApp.calendar({
    container: '#calendar-container',
    dayNamesShort: ["日", "一", "二", "三", "四", "五", "六"],
    monthNames: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    firstDay: 0,
    value: [new Date()],
    rangesClasses: [],
    toolbarTemplate:
    '<div class="toolbar calendar-custom-toolbar">' +
    '<div class="toolbar-inner">' +
    '<div class="left">' +
    '<a href="#" class="link icon-only"><i class="icon icon-back"></i></a>' +
    '</div>' +
    '<div class="center"></div>' +
    '<div class="right">' +
    '<a href="#" class="link icon-only"><i class="icon icon-forward"></i></a>' +
    '</div>' +
    '</div>' +
    '</div>',
    disabled: function (date) {
      // if (date.getFullYear() === 2019 && date.getMonth() === 6 && (date.getDate() === 4 || date.getDate() === 5)) {
      //   return false;
      // }
      // else {
      //   return true;
      // }
    },
    onOpen: function (p) {
      $('.calendar-custom-toolbar .center').text(p.currentYear + '年' + this.monthNames[p.currentMonth] + '月');
      $('.calendar-custom-toolbar .left .link').on('click', function () {
        calendarInline.prevMonth();
      });
      $('.calendar-custom-toolbar .right .link').on('click', function () {
        calendarInline.nextMonth();
      });
      setCalendarValue(p, array);
    },
    onMonthYearChangeStart: function (p) {
      $('.calendar-custom-toolbar .center').text(p.currentYear + '年' + this.monthNames[p.currentMonth] + '月');
    },
    onDayClick: function (p, dayContainer, year, month, day) {
      return false;
    }
  });

  function setCalendarValue(p, array) {
    $.each(array, function (index, value) {
      var curData = new Date(value);
      var curYear = new curData.getFullYear();
      var curMonth = curData.getMonth();

      if ((p.currentMonth == curMonth) && p.currentYear == curYear) {
        var curDay = curData.getDate();
        var dom = $('.picker-calendar-day').filter(function (index, value) {


        })




      }


    })
  }


</script>
</body>
</html>